<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='./vue.js'></script>
		<link rel="stylesheet" type="text/css" href="./reset.css">
		<style>
			.wrap {
				width: 100%;
				height: 100%;
			}
			.wrap .divCenter {
				transform-style: preserve-3d;
				perspective: 300;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
			.d {
				position: absolute;
				left: 50%;
				top: 50%;
				filter: hue-rotate(0deg) blur(100px)
			}
			@keyframes rotate {
				100% {
					filter: hue-rotate(360deg) blur(100px);
					transform: translate(-50%, -50%);
				}
			}
		</style>
	</head>
	<body>
		<div class='wrap'>
			<div class='divCenter'>
				<div v-for='item in arr' class='d' :style='c(item.i,item.color,item.width,item.height,item.rotate)'></div>
			</div>
		</div>
		<script>
			let arr = [];
			function randomColor() {
				return '#' + Math.random().toString(16).substr(3, 6).padEnd(6, '0');
			}
			for(let i = 0; i < 51; i++) {
				let color = '#' + (i*2).toString(16) + (i*2).toString(16) + (i*2).toString(16);
				let width = 10 * i + 'px';
				let height = 10 * i + 'px';
				let rotate = 5 * i;
				arr.push({
					color,
					width,
					height,
					rotate,
					i
				});
			}
			console.log(arr);
			new Vue({
				el: '.wrap',
				data: {
					arr
				},
				methods: {
					c(i,background,width,height,rotate) {
						return {
							width,
							height,
							background,
							transform: "translate(-50%, -50%) rotateZ(" + rotate + "deg)",
							'z-index': 100 - i,
							animation: 'rotate '+ '10' + 's linear infinite'
						} 
					}
				}
			})
		</script>
	</body>
</html>